CSS的寫法有很多種，就一個好的切版而言除了知道這些方法，還要知道什麼時候要用什麼方法。
要做到這件事，我們可以用以下這些步驟來做分析：

1. 首先我們可以依照遇到的情境思考可行方法
2. 了解其優缺點
3. 找出共通的規則
4. 結論出使用時機

我們用一個在切版裡一定會遇到的一個議題就是等高，有很多種方式可以等高，
那到底要用哪一種呢？

以等高為例：

一、使用css等高實作的方法

方法1：table-cell

.parent{
  display: table;
}
.left-part, .right-part{
  display: table-cell;
}

• 作法：父層下table,左右兩個小孩下table-cell
• 缺點：若多個項目需要換行的話，無法換行

方法2：display: flex

.parent{
  display: flex;
  flex-wrap: wrap; // 適用於需要換行時
}

• 作法：父層下flex,若子層項目需要換行，再加上 flex-wrap: wrap;

方法3：overflow / padding / bottom 組合技

.parent{
  overflow: hidden
}
.left-part, .right-part{
  padding-bottom: 10000px;
  margin-bottom: -10000px;
}

• 作法：父層下overflow: hidden,若子層用padding-bottom一個很大的值＋margin-bottom: 回一個相同的負值
• 原理：
  • 左右兩邊一起往下長一個很大的值(padding)
  • 再將接續在後面的元素用margin-bottom負值推回原位
  • 最後用父層隱藏多長出來的部分即可完成
• 缺點：
  • 左右元素的padding-bottom因為使用此方法下法會變得不直觀
  • 父層一定要overflow:hidden的情況下才能使用

小結論 (找出共通的規則)

要使用css製作等高，必需要有一個共同的父層

所以用CSS就可以做到所有的等高嗎？ 是不是有其他狀況？

二、來看看複雜一點的狀況

情境：區塊內的區塊需要等高的時候..

step1. 在父層加上display: flex;

• 問題：底色等高了，但底下的連結歪來歪去

step2. 用絕對定位，由下往上做對齊

這樣的等高方式，真的萬無一失了嗎？

無法確定等高底下的區塊有多高時，就會有問題了QAQ

結論：

1. 無法使用css製作等高的狀況為：非單純的左右兩塊等高，是區塊內的區塊，且接續後面的區塊無法確定多高就需要js計算等高了
2. 若非以上1的情況，建議可盡量使用css等高的方式
3. 就切版而言，能用css解決的事情不要動到javascript的話可以更省效能喔